<script setup>
import { onMounted, reactive, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter()
const route = useRoute()
import s2e from './img/s2e.png'
import { areaList } from '@vant/area-data';
import { deleteRouteFn, updateRouteFn } from '@/api/managercars';
// 返回函数
function back() {
	router.back()
}



// 提交数据的绑定
const form = reactive({
	start: '请点击选择',
	end: '请点击选择',
	isFullChecked: 'true',
	id: ''
})

// 判断当前选择的起点or终点
const type = ref('start')

// 切换选择起点或终点
function selectArea(t) {
	showBottom.value = true
	if (t == 'start') {
		type.value = 'start'
	} else {
		type.value = 'end'
	}
}
// 关闭按钮
function cancelClick(selection) {
	// console.log(selection);
	showBottom.value = false
}
// 取消按钮
function confirmClick({ selectedValues, selectedOptions, selectedIndexes }) {
	form[type.value] = selectedOptions[1].text
	// console.log(selectedOptions[1].text);

	showBottom.value = false
	console.log(form);

}
// 控制是否显示弹出层
const showBottom = ref(false)
// 选中地区码


// 点击更新路线
function editClick() {
	// 此处处理线路更新接口
	console.log('线路更新');
	updateRouteFn(form).then((res) => {
		if (res.message == '修改路线成功') {
			showSuccessToast(res.message);
			back()
		} else {
			showFailToast(res.message);
		}

	})

}
// 点击删除路线
function deleteClick() {
	// 此处处理删除路线接口
	deleteRouteFn({ id: form.id }).then((res) => {
		if (res.message == '删除路线成功') {
			showSuccessToast(res.message);
			back()
		} else {

		}

	})

}

// 初始化编辑内容
onMounted(() => {
	// console.log(route.query);
	const query = route.query
	form.start = query.start,
		form.end = query.end,
		form.isFullChecked = query.isFullChecked,
		form.id = query.id
	console.log(form);


})




</script>
<template>
	<!-- 头部 -->
	<div class="top">
		<div class="left" @click="back"> <svg t="1731917017729" class="icon" viewBox="0 0 1024 1024" version="1.1"
				xmlns="http://www.w3.org/2000/svg" p-id="9860" width="20" height="20">
				<path
					d="M238.208798 504.759085c114.078175 125.190257 330.334497 341.639984 441.040878 454.927143L785.790178 856.32207c-36.308951-36.902468-343.031681-348.783685-344.618828-358.506117 62.496379-64.083527 246.805082-251.967662 324.579423-339.65784l-95.228875-93.844342L238.208798 504.759085z"
					fill="#ffffff" p-id="9861"></path>
			</svg></div>
		<div class="mid"> 编辑路线</div>
		<div class="left"></div>
		<div class="right" @click="deleteClick">删除</div>
	</div>

	<!-- 运输类型选项 -->
	<div class="classify">
		<div class="left"> 运输类型</div>
		<div class="right">
			<van-radio-group v-model="form.isFullChecked" class="box">
				<van-radio name="true" style="overflow: visible;">
					<template #icon="props">
						<div :class="form.isFullChecked == 'true' ? 'active' : 'default'"> 整车</div>
					</template>
				</van-radio>
				<van-radio name="false" style="overflow: visible;">
					<template #icon="props">
						<div :class="form.isFullChecked == 'false' ? 'active' : 'default'"> 零担</div>

					</template>
				</van-radio>
			</van-radio-group>
		</div>
	</div>

	<!-- 起点终点选项 -->
	<div class="s2e">
		<div class="left">
			<img :src="s2e" alt="">
		</div>
		<div class="right">
			<div @click="selectArea('start')">{{ form.start }}</div>
			<div @click="selectArea('end')">{{ form.end }} </div>
		</div>
	</div>



	<van-button class="push" @click="editClick" :color="'#1678ff'" round>更改</van-button>

	<!-- 圆角弹窗（底部） -->
	<van-popup v-model:show="showBottom" round position="bottom" :style="{ height: '40%' }">
		<van-area :area-list="areaList" :columns-num="2" @cancel="cancelClick" @confirm="confirmClick" />
	</van-popup>
</template>
<style lang="scss" scoped>
.top {
	background-color: #1678ff;
	color: wihte;
	display: flex;
	justify-content: space-between;
	height: 0.6rem;
	align-items: center;
	box-sizing: border-box;
	padding: 0 15px;
	position: relative;

	.left {
		height: 20px;
		width: 50px;
	}

	.mid {

		font-size: 18px;
		display: flex;
		align-items: center;
	}

	.right {
		position: absolute;
		right: 10px;
		top: calc(37%)
	}
}

.classify {
	background-color: white;
	color: #888888;
	height: 40px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
	padding: 5px 15px;
	margin: 5px;

	.right {
		width: 150px;
		position: relative;
		top: -3px;

		.box {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;


			.active {
				color: white;
				background-color: #1678ff;
				font-size: 12px;
				padding: 3px 20px;
				border-radius: 15px;
			}

			.default {
				color: #1678ff;
				background-color: white;
				font-size: 12px;
				padding: 3px 20px;
				border-radius: 15px;
				border: 1px #1678ff solid;
			}
		}


	}
}

.s2e {
	background-color: white;
	display: flex;
	align-items: center;
	height: 133px;
	color: #888888;

	.left {
		width: 40px;
		height: 100px;

		img {
			width: 100%;
			height: 100%;
		}
	}

	.right {
		flex: 1;

		div {
			height: 50px;

			line-height: 50px;
			font-size: 16px;
			margin-left: 10px;
		}
	}

	box-sizing: border-box;
	padding: 5px 15px;
	padding-left: 0;
}



// 添加按钮
.push {
	width: 90%;
	margin: 0 auto;
	margin-top: 40px;
}
</style>